<template>
  <div class="risk">
    <div class="add" @click="addMember" v-if="this.active === 0 && isFirstShow">
      新增
    </div>
    <div
      class="add"
      @click="addDisposalCard"
      v-if="this.active === 1 && isFirstShow"
    >
      新增
    </div>
    <eagle-tab-page-list
      url="/PlanEmergencyOrgTeam/GetDetailPageData"
      :params="params"
      @initActive="_initActive"
      @initList="_initList"
      ref="eagleTabPageList"
      v-if="isFirstShow"
    >
      <div v-if="this.active === 0">
        <eagle-cell class="card" v-for="(item, index) in list" :key="index">
          <div>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <h3>{{ item.TeamMemberName }}</h3>
              </eagle-col>
            </eagle-row>
            <eagle-row>
              <eagle-col span="24" class="dep_sort">
                <img
                  style="vertical-align: middle"
                  src="@/assets/Images/AppIcon/icon_list_type.png"
                  alt=""
                />应急职务：{{ item.TeamMemberTypeName }}</eagle-col
              >
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_phone.png"
                  alt=""
                />成员电话：{{ item.TeamMemberPhone }}</eagle-col
              >
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_type.png"
                  alt=""
                />班次：{{ item.Shift }}
              </eagle-col>
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_type.png"
                  alt=""
                />平时职务：{{ item.Position }}
              </eagle-col>
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_date.png"
                  alt=""
                />加入日期：{{ getDate(item.JoinDate) }}
              </eagle-col>
            </eagle-row>
            <eagle-divider />
            <eagle-button
              class="ml-10 mt-10"
              style="float: right;height:30px;"
              size="small"
              type="default"
              @click.stop="editMember(item)"
              >编辑
            </eagle-button>
            <eagle-button
              class="ml-10 mt-10"
              style="float: right;height:30px;"
              size="small"
              type="default"
              @click.stop="delMember(item)"
              >删除
            </eagle-button>
          </div>
        </eagle-cell>
      </div>
      <div v-if="this.active === 1">
        <eagle-cell class="card" v-for="(item, index) in list" :key="index">
          <div>
            <eagle-row>
              <eagle-col span="24" class="dep_sort">
                <h3>{{ item.Name }}</h3>
              </eagle-col>
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_user.png"
                  alt=""
                />创建人：{{ item.CreateChnName }}</eagle-col
              >
            </eagle-row>
            <eagle-file-list
              :attachs="item.Attachs"
              :labelName="'应急处置卡：'"
            ></eagle-file-list>
            <eagle-divider />
            <eagle-button
              class="ml-10 mt-10"
              style="float: right;height:30px;"
              size="small"
              type="default"
              @click.stop="editDisposalCard(item)"
              >编辑
            </eagle-button>
            <eagle-button
              class="ml-10 mt-10"
              style="float: right;height:30px;"
              size="small"
              type="default"
              @click.stop="delCard(item)"
              >删除
            </eagle-button>
          </div>
        </eagle-cell>
      </div>
    </eagle-tab-page-list>

    <div class="main" v-if="isNextShow">
      <eagle-input
        class="input_text"
        readonly
        label="适用范围"
        v-model="form.Scope"
        required
      >
      </eagle-input>
      <eagle-input
        class="input_text"
        readonly
        label="应急小组名称"
        type="textarea"
        rows="1"
        v-model="form.EmergencyTeamName"
        required
      >
      </eagle-input>
      <eagle-input
        class="input_text"
        readonly
        label="应急职务"
        v-model="form.TeamMemberTypeName"
        required
      >
      </eagle-input>
      <eagle-input
        class="input_text"
        readonly
        label="应急小组成员姓名"
        v-model="form.TeamMemberName"
        required
      >
      </eagle-input>
      <eagle-input
        class="input_text"
        readonly
        label="应急小组成员电话"
        v-model="form.TeamMemberPhone"
        required
      >
      </eagle-input>
      <eagle-input
        class="input_text"
        readonly
        label="班次"
        v-model="form.Shift"
      >
      </eagle-input>
      <eagle-input
        class="input_text"
        readonly
        label="平时职务"
        v-model="form.Position"
      >
      </eagle-input>
      <eagle-input
        label="加入日期"
        class="input_text"
        :value="getDate(form.JoinDate)"
        readonly
      ></eagle-input>
      <van-field
        v-if="isShowCard"
        label="应急处置卡"
        class="input_text_block"
        required
      >
        <template #input>
          <div
            v-for="(item, index) in form.ListDisposalCard"
            :key="index"
            class="wrapper space-between mb-10"
          >
            <div v-for="(items, index2) in item.Attachs" :key="index2">
              <a style="color: blue" @click="_goEnclosureAttachs(items)">
                {{ item.Name }}</a
              >
            </div>
          </div>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
import { getDate } from "@/utils/getDate";
export default {
  data() {
    return {
      isFirstShow: this.$route.query.isFirstShow,
      isShowCard: this.$route.query.isShowCard,
      isNextShow: this.$route.query.isNextShow,
      id: this.$route.query.id,
      code: this.$route.query.code,
      form: {},
      active: 0,
      list: [],
      memberFilter: {
        id: this.$route.query.id,
        code: this.$route.query.code,
      },
      params: [
        {
          title: "组员详情",
          dataType: "Member",
          emergencyTeamCode: this.$route.query.code,
        },
        {
          title: "应急处置卡",
          dataType: "DisposalCard",
          emergencyTeamCode: this.$route.query.code,
        },
      ],
    };
  },
  created() {
    if (this.$route.query.id != null) {
      this.getTeamMemberDetail();
    }
  },
  methods: {
    _initActive(active) {
      this.active = active;
    },
    _initList(list) {
      this.list = list;
    },
    getDate(value) {
      return getDate(value);
    },
    getTeamMemberDetail() {
      let _this = this;
      _this.$axios
      .get("/PlanEmergencyOrgTeam/GetDetail",{params:_this.memberFilter})
      .then((res) => {
        if (res.data.ListDisposalCard) {
          res.data.ListDisposalCard.forEach((element) => {
            element.Attachs = JSON.parse(element.Attachs);
          });
        }
        _this.form = res.data;
      });
    },
    //删除组员
    delMember(item) {
      const _this = this;
      const id = item.ID;
      this.$dialog
        .confirm({
          title: "询问",
          message: "您确定删除本条记录吗？",
        })
        .then(() => {
          _this.$axios
          .get("/PlanEmergencyOrgTeamMember/Delete",{params:{ id: item.ID }})
          .then((res) => {
            _this.$toast.success("删除成功！");
            _this.$refs.eagleTabPageList.getList();
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //编辑组员
    editMember(item) {
      this.$router.push({
        path: "/PlanEmergencyOrgTeamMemberEdit",
        query: { id: item.ID },
      });
    },
    //新增组员
    addMember() {
      this.$router.push({
        path: "/PlanEmergencyOrgTeamMemberAdd",
        query: { id: 0, code: this.code },
      });
    },
    //删除应急处置卡
    delCard(item) {
      const _this = this;
      const id = item.ID;
      this.$dialog
        .confirm({
          title: "询问",
          message: "您确定删除本条记录吗？",
        })
        .then(() => {
          _this.$axios
          .get("/PlanEmergencyOrgTeamDisposalCard/Delete",{params:{ id: item.ID }})
          .then((res) => {
            _this.$toast.success("删除成功！");
            _this.$refs.eagleTabPageList.getList();
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //编辑应急处置卡
    editDisposalCard(item) {
      this.$router.push({
        path: "/PlanEmergencyOrgTeamDisposalCardEdit",
        query: { id: item.ID },
      });
    },
    //新增应急处置卡
    addDisposalCard() {
      this.$router.push({
        path: "/PlanEmergencyOrgTeamDisposalCardAdd",
        query: { id: 0, code: this.code },
      });
    },
    //附件详情
    _goEnclosureAttachs(items) {
      this.$router.push({
        path: "/Credential/Enclosure",
        query: { attCode: items.AttCode },
      });
    },
  },
};
</script>

<style lang="less">
.risk {
  height: 100vh;
  background-color: #e8f1f8;
  .info_search {
    padding: 10px;
    border-radius: 5px !important;
    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}
.dep_sort {
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
<style lang="less" scoped>
.space-between {
  justify-content: space-between;
}
</style>
